/**
 * vue3全局钩子函数
 * 约定：函数命名以use开头+功能 =》useXXX
 */
// 导入监控元素是否进入可视区钩子函数
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
/**
 * 数据懒加载
 * @param {*} apiFn 进入可视区，调用发送请求的方法
 */
export function useDataLazy (apiFn) {
  // 监控元素是否进入可视区
  // 1. 定义ref对象，获取要监控的元素或组件
  const target = ref()
  // 2. 借助useIntersectionObserver执行监控
  const { stop } = useIntersectionObserver(
    target, // == 指定要监控的元素或组件 ==
    ([{ isIntersecting }]) => {
      // console.log('新鲜好物:', isIntersecting ? '进入可视区' : '离开可视区')
      /**
         * 实现数据懒加载？
         * 1. 通过参数：isIntersecting =》 true 进入可视区 | false 离开可视区
         * 2. 在isIntersecting=true 发请求获取数据并渲染
         */
      if (isIntersecting) {
        apiFn()
        // 第一次进入可视区，发送一次请求，然后就关闭监控
        stop()
      }
    },
    //  进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
    {
      threshold: 0
    }
  )

  return { target }
}
